<!-- 页面 -->
<template>
	<s-layout navbar="custom" class="mobile">
		<div class="aa_mes clearfloat">
			<div class="aa_tx">
				<img src="/static/bokecc/images/newLive/x-logo.jpg" width="40" height="40">
			</div>
			<div class="aa_num">
				<h2>{{state.currentlesson.lesson_name}}</h2>
				<h5>老师：<span>{{state.currentlesson.teacher_name || "计划社名师"}}</span></h5>
			</div>
		</div>
		<!-- left start -->
		<div class="video-left">
			<div id="left-bar" class="left-bar">
				<span id="left-switch" class="bar-switch left-icons"></span>
			</div>
			<div id="widget-video" class="widget-video">
				<div id="main-video" class="main-video">
					<div id="videoInteractions" style="display: none;width: 100%;
		          height: 100%;
		          position: absolute;
		          top: 0;
		          left: 0;
		          background: #000;
		          z-index: 10;"></div>
					<div id="audioInteractions" style="display: none;"></div>
					<div class="call-box call-box-small" id="videoInteraction" style="display: none;  z-index: 99;">
						<div class="call-tit">视频通话申请中...</div>
						<div class="btn-toggle"></div>
						<video id="interactionLocalVideo" style="height: 100%; width: 100%;" autoplay></video>
					</div>

					<!-- 直播视频模块 -->
					<div id="livePlayer" style="height: 100%;"></div>
				</div>
				<div id="video-tools" class="video-tools">
					<a href="javascript:;" id="full-video" class="btn-full"> </a>
				</div>
			</div>
			<div>
				<!-- <button id="full-screen">进入全屏</button>
		        <button onclick="showControl(false)">隐藏控件</button> -->
			</div>
			<div class="gboxw">
				<a href="javascript:void(0);" class="gbtn"></a>
				<div class="gbox">
					<span class="gcion02"></span>
					<!-- <a href="javascript:void(0);" class="closegbox"></a> -->
					<div>暂无公告</div>
				</div>
			</div>
			<div id="question" class="question">
				<div class="question-title">
					<h2><i></i><span>提问区</span></h2>
				</div>
				<div class="question-main live-left">
					<ul id="question-main" class="l-b-m-list"></ul>
				</div>
				<div class="question-user">
					<div class="llb-t">
						<div class="face"></div>
						<div class="o-t" id="only-me"><i></i>只看我的提问</div>
					</div>
					<div class="llb-b">
						<div class="chat-send-content" id="question-content" contenteditable="true"></div>
						<a href="javascript:;" class="btn btn-mini btn-chat" id="question-submit">提问</a>
					</div>
				</div>
			</div>
		</div>
		<!-- left end -->
		<!-- middle start -->
		<div class="video-middle" id="video-middle">
			<div class="video-m-top" id="doc-main" data-module="1">
				<!--<div class="document-main">-->
				<!-- 直播文档模块 -->
				<div id="drawPanel"></div>

				<!--</div>-->
				<div id="ppt-tools" class="ppt-tools">
					<a href="javascript:;" id="full-ppt" class="btn-full"> </a>
				</div>
			</div>
			<!-- 测试交互区域 -->
			<div class="interactive" style="display: none;">
				<ul>
					<p>直播间功能</p>
					<li>
						<button id="destroy" title="DWLive.destroy">销毁</button>
					</li>
				</ul>
				<ul>
					<p>播放器模块</p>
					<li>
						<button class="toggle-control" title="DWLive.showControl">隐藏控制条</button>
					</li>
					<li>
						<input id="soundInput" type="text" placeholder="范围0到1">
						<button class="set-sound" title="DWLive.setSound">设置音量</button>
					</li>
					<li>
						<button class="toggle-barrage" title="DWLive.openBarrage">打开弹幕</button>
					</li>
					<li>
						<button id="hidePlayerFullScreen" title="DWLive.setShowFullScreenBtn">隐藏全屏按钮</button>
					</li>
				</ul>
				<ul>
					<p>文档模块</p>
					<li>
						<button id="docAdapt" title="DWLive.docAdapt">文档适宽</button>
					</li>
					<li>
						<button id="changeMode" title="DWLive.setDocMode">切换文档模式</button>
					</li>
					<li>
						<button id="getDocumentInfo" title="DWLive.getDocumentInfo">获取文档信息</button>
					</li>
					<li>
						<button id="getDocs" title="DWLive.getDocs">获取直播间所有文档信息</button>
					</li>
					<li>
						<input type="text" id="docId" placeholder="输入文档id" />
						<input id="pageIndeId" type="text" placeholder="输入页码" />
						<button id="jump_btn" title="DWLive.changePageTo">跳转到指定文档页</button>
					</li>
					<li>跳转到指定文档页需要先切换文档模式为自由模式，然后点击上面的获取直播间所有文档信息按钮获取文档信息，才可以成功翻页</li>
				</ul>
				<ul>
					<p>基础互动组件</p>
					<ul>
						<li>
							<input id="practiceId" type="text" value="" placeholder="随堂测id">
							<input id="practiceOpt" type="text" value="" placeholder="选项id">
							<button id="submitPracticeInfo" title="DWLive.submitPracticeInfo">提交随堂测</button>
						</li>
						<li>
							<button id="hdCommitPunch" title="DWLive.hdCommitPunch">提交打卡</button>
						</li>
					</ul>
				</ul>
				<button class="toggle-size" id="toggleSize">X</button>
			</div>
			<div class="l-m-b">
				<div class="lmb-r">
					<ul class="lmb-r-tools" style="display: flex;">
						<!-- <li>
		              <a
		                href="javascript:;"
		                class="wl"
		                id="btn-network"
		                title="切换线路"
		              ></a>
		            </li> -->
						<li>
							<a href="javascript:;" class="qh" id="btn-switch" title="切换窗口"></a>
						</li>
						<!-- <li>
		              <a
		                href="javascript:;"
		                class="only-audio"
		                id="btn-audio"
		                title="只听音频"
		              ></a>
		            </li>
		            <li>
		              <a
		                href="javascript:;"
		                class="clip-image"
		                id="btn-clip"
		                title="截图"
		              ></a>
		            </li>
		            <li id="interactionVideo" title="视频互动" name="interaction" t="video" style="">
		              <a
		                href="javascript:void(0);"
		                class="video"
		                data-title="视频互动"
		              ></a>
		            </li>
		            <li id="interactionAudio" title="语音互动" name="interaction" t="audio" style="">
		              <a
		                href="javascript:void(0);"
		                class="audio"
		                data-title="语音互动"
		              ></a>
		            </li>
		            <li>
		              <a
		                href="javascript:;"
		                class="gm"
		                id="change-nickname"
		                title="改名"
		              ></a>
		            </li>
		            <div id="streamQuality">
		            </div>
		            <li style="width: 100px; margin-left: 140px;">
		              <span class="fl mr5" style="float: left;" id="mr5"></span>
		              <a
		                title="退出登录"
		                href="javascript:void(0);"
		                id="logout"
		                class="exit"
		                data-title="退出"
		                style="display: block;"
		              ></a>
		            </li> -->
						<span id="interactionMsg" style="padding-top: 5px; display: inline-block;"></span>
					</ul>
				</div>
			</div>
		</div>
		<!-- middle end -->
		<!-- right start -->
		<div class="video-right live-right" id="video-right">
			<div id="right-bar" class="right-bar">
				<span id="right-switch" class="bar-switch right-icons"></span>
			</div>
			<div class="chat-main">
				<div class="chat-title">
					<h2><i></i ><span>聊天室</span></h2>
					<div class="chat-people" id="chat-people"></div>
					<div class="userlist" id="list-main">
						<i class="curr"></i>
						<h3 class="h6">在线用户(<em id="people-number"></em>)</h3>
						<ul id="people-list"></ul>
					</div>
				</div>
				<div class="chat-list l-r-m">
					<ul id="chat-list" class="chat-list l-r-m-list"></ul>
				</div>
				<div class="chat-send">
					<div class="chat-tips-scroll" id="chat-tips-scroll">
						有<em>0</em>条未读记录。
					</div>

					<div class="chat-area">
						<div class="chat-tips" id="chat-tips">
							<span class="arr"></span>
							<a href="javascript:;" class="tips-main">您现在感觉卡了吗？点这里</a>
							<a href="javascript:;" class="close-tips" id="close-tips">关闭提示</a>
						</div>
						<div class="lrb-b">
							<div class="chat-send-content" contenteditable="true" id="chat-content"></div>
							<a href="javascript:;" class="btn btn-mini btn-chat" id="chat-submit">发送</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 选择网络 -->
		<div class="public-layer" id="network">
			<div class="layer-title">
				<h2>选择网络</h2>
				<span class="layer-close" id="work-close"></span>
			</div>
			<div class="layer-content">
				<p>以下可以选择的网络途径:</p>
				<ul class="change-network" id="change-network">
					<li>
						<input type="radio" value="0" name="network" id="network0" checked="" /><label
							for="network0">主线路</label>
					</li>
					<li>
						<input type="radio" value="1" name="network" id="network1" /><label for="network1">备用线路</label>
					</li>
				</ul>
				<div class="networks btns">
					<input type="button" class="works-btn" id="btn-netsubmit" value="确定" />
					<input type="button" class="works-btn" id="btn-netcannel" value="取消" />
				</div>
			</div>
		</div>

		<!-- 输入提示 -->
		<div class="input-tips" id="input-tips">
			<i></i>
			<p></p>
			<div class="input-tips-cur"></div>
		</div>

		<!-- 签到 -->
		<div class="sign">
			<div class="siandiv">
				<div class="signline"></div>
				<div class="signicon"></div>
				<div class="signtxt"></div>
				<div class="signbtn">
					<button>我要签到</button>
				</div>
			</div>
			<div class="maskbg"></div>
		</div>

		<!-- 打卡 -->

		<!-- 抽奖 -->
		<div class="lottery">
			<div class="lotterydiv">
				<div class="lotteryh3">正在抽奖</div>
				<div class="lotteryclose"></div>
				<div class="lotterynum"></div>
				<div class="lotterytext">请牢记您的中奖码</div>
				<div class="lotterybox">
					<div class="lotterytext2">中奖者</div>
					<div class="lotteryname"></div>
				</div>
			</div>
			<div class="maskbg"></div>
		</div>
		<!-- 抽奖2.0 -->
		<div class="luckey-draw">
			<div class="luckey-drawdiv">
				<div class="tips-box tips-box-start" style="display: none;">
					<p class="tips-title">提示</p>
					<div class="tips-content">
						<p class="tips-desc tips-start-desc">本次抽奖已取消</p>
					</div>
					<div class="tips-btn">
						<button class="tips-submit tips-start-submit">
							确定
						</button>
					</div>
				</div>
				<div class="luckey-drawing">
					<div class="luckey-drawing-h3"></div>
					<div class="luckey-drawing-close"></div>
				</div>
				<div class="luckey-draw-result">
					<div class="tips-box tips-box-end">
						<p class="tips-title"></p>
						<div class="tips-content">
							<p class="tips-desc tips-end-desc"></p>
						</div>
						<div class="tips-btn">
							<button class="tips-submit tips-end-submit">
								确定
							</button>
							<button class="tips-cancel">
								取消
							</button>
						</div>
					</div>
					<div class="luckey-draw-success">
						<p></p>
					</div>
					<div class="luckey-draw-error">
						<p></p>
					</div>
					<div class="luckey-draw-result-h3">抽奖结果</div>
					<div class="luckey-draw-result-close"></div>
					<div class="luckey-draw-content">
						<div class="win-prize-box">
							<p class="win-prize-tips">恭喜您获得了<span class="win-name"></span>,请牢记您的中奖码
							</p>
							<div class="win-prize-num"></div>
							<p class="cash-prize-tips">请在30分钟内输入以下信息，方便工作人员与您取得联系~</p>
							<div class="luckey-draw-info">
								<ul class="luckey-draw-info-list"></ul>
								<p class="submit-msg-tips"></p>
								<div class="luckey-draw-btn">提交</div>
							</div>
						</div>
						<div class="not-win-prize-box">
							<div class="not-win-prize"><img src="https://static.csslcloud.net/img/cry-face.png"></div>
							<p class="not-win-prize-tips">很遗憾，您没有获得<span class="no-win-name"></span></p>
						</div>
						<div class="win-prize-wrap win-prize-min-height">
							<div class="winning-list-title">中奖名单<span class="winning-list-icon down"></span></div>
							<ul class="win-prize-list"></ul>
						</div>
					</div>

				</div>
			</div>
			<div class="maskbg"></div>
		</div>

		<!-- 答题 -->
		<div class="vote">
			<div class="votediv">
				<div class="vote-line"></div>
				<div class="vote-close"></div>
				<div id="vote1">
					<div class="vote-icon"></div>
					<h3>请选择答案</h3>
					<div class="vote-tips">题干部分请参考文档或直播视频</div>
					<ul class="vote-option"></ul>
				</div>
				<div id="vote2">
					<div class="vote-icon2"></div>
					<h3>答题统计</h3>
					<div class="vote-tips">
						答题结束，共<span id="vote-count"></span>人回答。
					</div>
					<div class="vote-a">
						<span id="yansw">您的答案:<em></em></span>
						<span id="cansw" class="vote-righta">正确答案:<em></em></span>
					</div>
					<ul class="vote-list"></ul>
				</div>
			</div>
			<div class="maskbg"></div>
		</div>
		<!-- <span id="viewerMarquee" style="display: none">
		      {"loop":-1,"type":"text","text":{"content":"123","font_size":20,"color":"0xffffff"},"action":[{"duration":4000,"start":{"xpos":0.3,"ypos":0,"alpha":0.5},"end":{"xpos":0,"ypos":0.4,"alpha":0.5}},{"duration":16000,"start":{"xpos":0,"ypos":0.4,"alpha":0.5},"end":{"xpos":0.8,"ypos":1,"alpha":0.5}},{"duration":4000,"start":{"xpos":0.8,"ypos":1,"alpha":0.5},"end":{"xpos":1,"ypos":0.8,"alpha":0.5}},{"duration":16000,"start":{"xpos":1,"ypos":0.8,"alpha":0.5},"end":{"xpos":0,"ypos":0.2,"alpha":0.5}},{"duration":4000,"start":{"xpos":0,"ypos":0.2,"alpha":0.5},"end":{"xpos":0.2,"ypos":0,"alpha":0.5}},{"duration":12000,"start":{"xpos":0.2,"ypos":0,"alpha":0.5},"end":{"xpos":1,"ypos":0.6,"alpha":0.5}},{"duration":8000,"start":{"xpos":1,"ypos":0.6,"alpha":0.5},"end":{"xpos":0.4,"ypos":1,"alpha":0.5}},{"duration":8000,"start":{"xpos":0.4,"ypos":1,"alpha":0.5},"end":{"xpos":0,"ypos":0.7,"alpha":0.5}},{"duration":16000,"start":{"xpos":0,"ypos":0.7,"alpha":0.5},"end":{"xpos":1,"ypos":0.3,"alpha":0.5}},{"duration":8000,"start":{"xpos":1,"ypos":0.3,"alpha":0.5},"end":{"xpos":0.3,"ypos":0,"alpha":0.5}}]}
		    </span> -->

		<!--蒙板-->
		<div id="mask">
			<p>x</p>
			<img src="" />
		</div>
	</s-layout>

</template>

<script setup>
	import '@/static/bokecc/css/liveVersionOne/fatstyle.css';
	import '@/static/bokecc/css/liveVersionOne/video-main.css';
	import '@/static/bokecc/css/liveVersionOne/pop.css';
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue';
	import $store from '@/sheep/store';
	import {
		showAuthModal,
		showShareModal
	} from '@/sheep/hooks/useModal';
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onHide,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);

	// 数据
	const state = reactive({
		goodsId: 0,
		goodsTitle: '',
		isBuyVisible: false, //控制购买的显示隐藏框
		paid_auth: false, //后台计算的是否购买
		currentTab: 0,
		livestart: false,
		cc_callback_play: false,
		recordId: 0,
		userid: '',
		viewertoken: '',
		roomid: '',
		mululist: true,
		currentlesson: [],
		starttime: '',
		countdown: '',
		goodsinfo: [],

	});

	const pointdata = [{
		time: 600, // s
		desc: '123'
	}];

	const tabMaps = [{
			name: '聊天',
			value: 'video',
		},
		{
			name: '问答',
			value: 'jiangyi',
		}

	];

	//var testshili = function() {}


	//页面在h5中跳转
	onUnload(async (options) => {
		
	});

	onHide(async (options) => {
		
	});
	onLoad(async (options) => {
		const userInfo = await sheep.$store('user').getInfo();
		state.userInfo = userInfo

		const systemInfo = uni.getSystemInfoSync();
		const platform = systemInfo.platform;
		if (platform != 'windows') { // 注意：这里的判断逻辑可能需要根据实际的platform值进行调整
			state.isH5device = true;
		} else {
			state.isH5device = false;
		}
		///liveSDK.js
		///chat_qa.js
		//await loadScript("/weixin/static/bokecc/js/liveSDK.js", function() {

		await loadScript("/static/bokecc/js/handlebars.js", function() {
			console.log("handlebars.js loaded");
		});
		await loadScript("/static/bokecc/js/base.js", function() {
			console.log("handlebars.js loaded");
		});
		await loadScript("/static/bokecc/js/common.js", function() {
			console.log("handlebars.js loaded");
		});
		await loadScript("/static/bokecc/js/liveSDK.js", function() {
			console.log("liveSDK.js loaded");
		});
		await loadScript("/static/bokecc/js/live.js", function() {
			console.log("liveSDK.js loaded");
		});
		await loadScript("/static/bokecc/js/cc.questionnaire.js", function() {
			console.log("cc.questionnaire.js loaded");
		});
		await loadScript("/static/bokecc/js/ui.js", function() {
			console.log("chat_qa.js loaded");
		});


		state.goodsId = options.id
		state.goodsTitle = options.title

		sheep.$api.course.zhibo({
			'goods_id': options.id,
			'lesson_id': options.lesson_id,
		}).then((res) => {
			if (res.code === 1) {
				console.log(res.data.currentLesson)
				state.userid = res.data.ccinfo.userid
				state.viewertoken = res.data.ccinfo.token
				state.roomid = res.data.currentLesson.ccRoomId
				state.currentlesson = res.data.currentLesson
				state.starttime = res.data.currentLesson.livestart_time
				//state.goodsinfo = res.data.goodsinfo
				uni.setNavigationBarTitle({
					title: res.data.currentLesson.lesson_name,
				});
				console.log(state)
				DWLive.init({
					userid: state.userid,
					roomid: state.roomid,
					viewername: state.userInfo.username + " " + state.userInfo.nickname, //可选
					viewertoken: state.viewertoken, //如果直播间设置为密码验证，必选
					viewercustomua: "web",
					language: 'zh', //可选
					pcH5Live: true, //可选
					fastMode: true, //可选参数，默认为true
					isShowFullScreen: false, //可选参数，默认为true
				});



				window.customEmjArr = []
				window.customEmjObj = {}
				DWLive.onChatCustomEmoji = function(data) {
					window.customEmjArr = data.customEmojiArr
					window.customEmjObj = data.customEmojiObj
				}

				//直播开始
				DWLive.onLiveStart = function(j) {
					console.log('websdk log: 开始', j)
					state.livestart = true
					$(".cc-live-control-bar").css("right","9px");

				};
				// 停止直播
				DWLive.onLiveEnd = function(j) {
					console.log('websdk log: DWLive.onLiveEnd', j)
					state.countdown = '直播已结束';
					state.livestart = false
				}
				// 登录成功
				DWLive.onLoginSuccess = function(data) {
					console.log("websdk log: DWLive.onLoginSuccess", data);
					DWLive.groupId = data.viewer.groupId;

				};
				DWLive.onLoginError = function() {
					console.log("websdk log: DWLive.onLoginError");
				};

				// 在线人数
				DWLive.onUserCountMessage = function(j) {
					console.log('websdk log: DWLive.onUserCountMessage',
						j);

				}
				DWLive.showUserCount = function(data) {
					console.log('websdk log: DWLive.showUserCount', data)
				}
				DWLive.onLiveDesc = function(data) {
					console.log('websdk log: DWLive.onLiveDesc', data)
				}
				DWLive.onOnlineTeachers = function(data) {
					console.log('websdk log: DWLive.onOnlineTeachers',
						data)
				}
				DWLive.onLiveTime = function(e) {
					console.log("websdk log: DWLive.onLiveTime", e);
					console.log(e.status)
					if (e.status == 1) {
						state.livestart = true
					}
				}
				DWLive.onSwitchSource = function(data) {
					console.log('websdk log: DWLive.onSwitchSource', data)
				}
				DWLive.onSwitchVideoDoc = function(main) {
					console.log('websdk log: DWLive.onSwitchVideoDoc',
						main)
					console.log("当前是否以视频为主-->" + main);
				};
				window.onSocketConnect = function() {
					console.log('websdk log: window.onSocketConnect')
					console.log("pusher链接成功");

				};
				window.onSocketDisconnect = function() {
					console.log('websdk log: window.onSocketDisconnect')
				}
				//改名回调
				DWLive.onChangeNickname = function(data) {
					console.log('websdk log: DWLive.onChangeNickname',
						data)
					console.log(data)
				}
				DWLive.onInformation = function() {
					console.log('websdk log: DWLive.onInformation')
					console.log('直播间禁止聊天或问答时，发送消息的回调通知')
				}
				DWLive.onBanChat = function(j) {
					$("#alert_container").show();
					console.log('websdk log: DWLive.onBanChat', j)
					console.log('您已被禁言' + JSON.stringify(j))
				}
				DWLive.onUnBanChat = function(j) {
					$("#alert_container").hide();
					console.log('websdk log: DWLive.onUnBanChat', j)
					console.log('您已解禁' + j)
				}
				DWLive.onBanDeleteChat = function(da) {
					console.log('websdk log: DWLive.onBanDeleteChat', da)
				}
				DWLive.on_hd_live_player_type = function(t) {
					console.log(
						'websdk log: DWLive.on_hd_live_player_type', t)
				}
				DWLive.onHdLiveStartPunch = function(e) {
					console.log("H5打卡", e);
				};


				// DWLive.hdGetChatTop(function (res) {
				//   console.log('当前聊天置顶消息---', res)
				// })

				DWLive.onChatTop = function(data) {
					console.log('聊天置顶---', data)
				}

				DWLive.onChatTopCancel = function(data) {
					console.log('取消聊天置顶---', data)
				}

				window.on_cc_live_pagechange_complete = function(data) {
					console.log('静态文档翻页成功', data)
					console.log(
						'websdk log: window.on_cc_live_pagechange_complete',
						data)
				};

				// testshili.prechat = function() {
				// 	console.log("232323")
				// 	chatSend();
				// 	console.log("55555555")
				// }
				DWLive.onStartRollCall = function(data) {
					console.log('签到开始')
				}

				// 获取元素的左上角位置
				var position = $(".u-tabs").offset();
				var chatposition = $(".chat-edit-area").offset();
				var chatheight = chatposition.top - position.top - 50 - $(".gbox").height();

				$(".mulutab").height(chatheight);
				$(".mulutabask").height(chatheight);
				djs();





				setTimeout(function() {
					// 获取元素的左上角位
					$(".cc-autoplay-txt").css({
						"font-size": "10px",
						"display": ""
					});

					setTimeout(function() {
						// 获取元素的左上角位
						$(".cc-autoplay-txt").css({
							"font-size": "10px",
							"display": ""
						});

						setTimeout(function() {
							// 获取元素的左上角位
							$(".cc-autoplay-txt").css({
								"font-size": "10px",
								"display": ""
							});
						}, 800)
					}, 800)
				}, 800)
				//setInterval(toChatBottom, 300);

			}
		});
	});

	function prechatSend() {
		console.log("fafafa")
		chatSend();
		//testshili.prechat()
	}

	function djs() {
		// 设置目标时间，格式为 YYYY-MM-DDTHH:mm:ss
		const targetDate = new Date(state.starttime).getTime();

		// 获取当前时间
		const now = new Date().getTime();

		// 计算时间差（毫秒）
		const distance = targetDate - now;

		// 时间单位转换
		const days = Math.floor(distance / (1000 * 60 * 60 * 24));
		const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((distance % (1000 * 60)) / 1000);


		//const countdownElement = document.getElementById('countdown');
		const daysElement = days < 10 ? '0' + days : days;
		const hoursElement = hours < 10 ? '0' + hours : hours;
		const minutesElement = minutes < 10 ? '0' + minutes : minutes;
		const secondsElement = seconds < 10 ? '0' + seconds : seconds;
		//countdownElement.innerHTML = 
		state.countdown = `${daysElement}天 ${hoursElement}小时 ${minutesElement}分钟 ${secondsElement}秒`;

		// 每秒更新一次
		if (distance > 0) {
			setTimeout(djs, 1000);
		} else {
			state.countdown = '直播等待中';
		}

	}


	function loadScript(src, callback) {
		return new Promise((resolve, reject) => {
			const script = document.createElement('script');
			script.src = src;
			script.onload = () => {
				if (callback) callback();
				resolve();
			};
			script.onerror = () => {
				reject(new Error(`Failed to load script: ${src}`));
			};
			document.head.appendChild(script);
		});
	}

	// 切换选项卡
	function onTabsChange(e) {
		if (state.currentTab === e.index) return;
		state.currentTab = e.index;
		console.log(state.currentTab == 1)
		if (state.currentTab == 1) {
			toChatBottomask()
		} else {
			toChatBottom()
		}
	}


	//保存用户学习记录
	function savelearnrecord() {
		console.log('state.goodsinfo');
		console.log($.DW.getPlayerTime());

		if (Number(state.recordId) > 0) {
			sheep.$api.course.saveLearRrecord({
				'goods_id': state.goodsinfo.id,
				'lesson_id': state.recordId,
				'LearnSecond': $.DW.getPlayerTime(),
				'source': 'h5',
				'url': 'aaaaaa'
			}).then((res) => {
				if (res.code === 1) {
					console.log("存储学习记录成功")
				} else {
					// 未找到商品
					console.log("未找到")
				}
			});
		}
	}

	function toChatBottom() {
		var chatBox = $(".mulutab"); // 选择页面上可见的 .chatBox 元素

		setTimeout(function() {
			chatBox.animate({
				scrollTop: $("#chat_container:visible").prop('scrollHeight')
			}, 0);
		}, 100)
	}

	function toChatBottomask() {
		var chatBox = $(".mulutabask"); // 选择页面上可见的 .chatBox 元素
		setTimeout(function() {
			chatBox.animate({
				scrollTop: $("#questionInfo").prop('scrollHeight')
			}, 0);
		}, 100);

	}

	function xuanzhuan() {
		var contentDiv1 = $("#qie_pdf_box").html();
		var contentDiv2 = $("#qie_video_box").html();

		// 交换内容
		$("#qie_pdf_box").html(contentDiv2);
		$("#qie_video_box").html(contentDiv1);
	}
</script>

<style lang="scss" scoped>
	#mask {
		width: 100%;
		height: 100%;
		background: #ccc;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: none;
		opacity: 0.8;
	}

	#mask img {
		max-width: 50%;
		max-height: 70%;
		cursor: pointer;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1001;
	}

	#mask p {
		display: block;
		position: fixed;
		top: 100px;
		right: 150px;
		font-size: 30px;
		cursor: pointer;
	}

	

	#streamQuality button {
		cursor: pointer;
	}

	#streamQuality .btn {
		border: 1px solid blue;
		box-sizing: border-box
	}

	/* 抽奖2.0 */
	.luckey-draw {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999;
		display: none;
	}

	.luckey-draw .luckey-drawdiv {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.luckey-draw .luckey-drawing {
		background: #fffcdc url(https://static.csslcloud.net/img/lottery04.gif) center -46px no-repeat;
		background-size: 140%;
		background: #fffcdc url(https://static.csslcloud.net/img/lottery05.gif) center -46px no-repeat\9;
		border: 1px solid #ff512c;
		z-index: 999;
		box-shadow: inset 0px -4px 0px 0px #ff512c;
		width: 270px;
		height: 190px;
		border-radius: 4px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -95px 0 0 -135px;
		display: none;
	}

	.luckey-draw .luckey-drawing-h3 {
		background: url(https://static.csslcloud.net/img/lottery01.png) no-repeat;
		text-align: center;
		line-height: 50px;
		color: #fff;
		font-size: 18px;
		width: 325px;
		height: 50px;
		position: absolute;
		background-size: 100%;
		background-image: none\9;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.csslcloud.net/img/lottery01.png', sizingMethod='scale')\9;
		top: -24px;
		left: -28px;
	}

	.luckey-draw .luckey-drawing-close {
		background: url(https://static.csslcloud.net/img/lottery02.png) no-repeat;
		width: 30px;
		height: 30px;
		background-size: 100%;
		background-image: none\9;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.csslcloud.net/img/lottery02.png', sizingMethod='scale')\9;
		position: absolute;
		top: -13px;
		right: 6px;
		cursor: pointer;
	}

	.luckey-draw .luckey-draw-result {
		width: 336px;
		z-index: 1;
		border: 1px solid #ff512c;
		box-shadow: inset 0px -4px 0px 0px #ff512c;
		border-radius: 4px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFCDC;
		display: none;
	}

	.luckey-draw .tips-box {
		display: none;
		padding-bottom: 50px;
		width: 300px;
		background: #fff;
		z-index: 1000;
		border-radius: 6px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.luckey-draw .tips-box .tips-title {
		width: 300px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
	}

	.luckey-draw .tips-box .tips-content {
		width: 300px;
		text-align: center;
	}

	.luckey-draw .tips-box .tips-content .tips-desc {
		margin: 20px;
	}

	.luckey-draw .tips-box .tips-btn {
		position: absolute;
		right: 0px;
		margin: auto;
		left: 0px;
		text-align: center;
		outline: none;
	}

	.luckey-draw .tips-box .tips-btn .tips-submit {
		background: #57b8f4;
		color: #fff;
		border: none;
		font-size: 12px;
		width: 55px;
		height: 23px;
		margin: 14px 8px 0 0;
		border-radius: 2px;
	}

	.luckey-draw .tips-box .tips-btn .tips-cancel {
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 2px;
		width: 55px;
		height: 23px;
		margin: 14px 8px 0 0;
		color: #666;
		font-size: 12px;
	}

	.luckey-draw button {
		padding: 0;
	}

	.luckey-draw-result .luckey-draw-success {
		display: none;
		width: 120px;
		height: 120px;
		background: url(https://static.csslcloud.net/images/lottery-v2/success.png) no-repeat center;
		background-size: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.luckey-draw-result .luckey-draw-error {
		display: none;
		width: 120px;
		height: 120px;
		background: url(https://static.csslcloud.net/images/lottery-v2/error.png) no-repeat center;
		background-size: contain;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.luckey-draw-result .luckey-draw-success p {
		font-size: 13px;
		color: #FFFFFF;
		width: 100%;
		height: 13px;
		margin: 78px auto 0;
		text-align: center;
	}

	.luckey-draw-result .luckey-draw-error p {
		font-size: 13px;
		color: #FFFFFF;
		width: 95px;
		height: 13px;
		margin: 78px auto 0;
		text-align: center;
	}

	.luckey-draw-result .luckey-draw-result-h3 {
		width: 390px;
		height: 50px;
		background: url(https://static.csslcloud.net/img/lottery01.png) no-repeat;
		text-align: center;
		line-height: 50px;
		color: #fff;
		font-size: 18px;
		position: absolute;
		background-size: 100%;
		background-image: none\9;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.csslcloud.net/img/lottery01.png', sizingMethod='scale')\9;
		top: -24px;
		left: -28px;
	}

	.luckey-draw-result .luckey-draw-result-close {
		background: url(https://static.csslcloud.net/img/lottery02.png) no-repeat;
		width: 30px;
		height: 30px;
		background-size: 100%;
		background-image: none\9;
		/* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.csslcloud.net/img/lottery02.png', sizingMethod='scale')\9; */
		position: absolute;
		top: -13px;
		right: 6px;
		cursor: pointer;
	}

	.luckey-draw-result .luckey-draw-content {
		width: 100%;
		max-height: 449px;
		overflow-y: scroll;
	}

	.luckey-draw-result .luckey-draw-content::-webkit-scrollbar {
		width: 4px;
		background-color: rgba(0, 0, 0, 0);
	}

	.luckey-draw-result .luckey-draw-content::-webkit-scrollbar-thumb {
		-webkit-border-radius: 2px;
		border-radius: 2px;
		background-color: rgba(153, 153, 153, 1);
	}

	.luckey-draw-result .win-prize-tips {
		margin: 46px 30px 20px 30px;
		color: #333333;
		font-size: 13px;
		line-height: 23px;
		text-align: center;
	}

	.luckey-draw-result .win-prize-tips span {
		color: #FF412E;
	}

	.luckey-draw-result .win-prize-num {
		font-family: Arial;
		background: url(https://static.csslcloud.net/img/lottery03.png) no-repeat;
		width: 207px;
		height: 92px;
		background-size: contain;
		color: #ff412e;
		text-indent: 26px;
		line-height: 96px;
		margin: 0 auto 8px;
		font-size: 30px;
	}

	.luckey-draw-result .cash-prize-tips {
		color: #333333;
		font-size: 12px;
		margin: 7px 10px 20px 10px;
		text-align: center;
	}

	.luckey-draw-info li {
		width: 298px;
		margin-left: 16px;
		margin-right: 20px;
		margin-bottom: 10px;
	}

	.luckey-draw-info label {
		width: 48px;
		display: inline-block;
		margin-right: 5px;
		text-align: right;
		font-size: 12px;
		color: #333333;
	}

	.luckey-draw-info input {
		width: 226px;
		height: 30px;
		margin-bottom: 0px;
		border-radius: 4px;
	}

	.luckey-draw-info .submit-msg-tips {
		height: 12px;
		text-align: center;
		color: #FF412E;
		font-size: 12px;
		line-height: 12px;
		margin-bottom: 10px;
	}

	.luckey-draw-info .luckey-draw-btn {
		width: 140px;
		height: 40px;
		background-color: #FF412E;
		color: #FFFFFF;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
		margin: 0 auto 20px;
		border-radius: 4px;
		cursor: pointer;
	}

	.luckey-draw-result .win-prize-wrap {
		width: 294px;
		background-color: rgba(153, 153, 153, .2);
		border-radius: 10px;
		margin: 0 auto 20px;
		position: relative;
	}

	.luckey-draw-result .win-prize-min-height {
		height: 32px;
		overflow: hidden;
	}

	.luckey-draw-result .winning-list-title {
		width: 294px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		color: #333333;
	}

	.luckey-draw-result .winning-list-icon {
		width: 10px;
		height: 6px;
		position: absolute;
		top: 13px;
		right: 107px;
	}

	.luckey-draw-result .down {
		background: url(https://static.csslcloud.net/images/lottery-v2/down.png) no-repeat center;
		background-size: contain;
	}

	.luckey-draw-result .up {
		background: url(https://static.csslcloud.net/images/lottery-v2/up.png) no-repeat center;
		background-size: contain;
	}

	.win-prize-wrap ul {
		display: inline-block;
	}

	.win-prize-wrap li {
		display: inline-block;
		width: 50px;
		margin-left: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.win-prize-wrap li div {
		width: 26px;
		height: 26px;
		margin: 0 auto 10px;
	}

	.win-prize-wrap li div img {
		width: 100%;
	}

	.win-prize-wrap li p {
		width: 50px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.luckey-draw-result .not-win-prize-box {
		display: none;
	}

	.luckey-draw-result .not-win-prize {
		width: 48px;
		height: 51px;
		margin: 46px auto 20px;
	}

	.luckey-draw-result .not-win-prize img {
		width: 100%;
	}

	.luckey-draw-result .not-win-prize-tips {
		margin: 0px 20px 20px 20px;
		color: #333333;
		font-size: 13px;
		line-height: 23px;
		text-align: center;
	}

	.luckey-draw-result .not-win-prize-tips span {
		color: #FF412E;
	}

	.interactive {
		position: relative;
		width: 520px;
		max-height: 800px;
		overflow: auto;
		z-index: 999;
		position: absolute;
		left: 0;
		top: 0;
		padding: 10px;
		background: pink;
		display: none;
	}

	.interactive ul>p {
		padding: 0 10px;
		background: yellow;
	}

	.interactive li {
		display: flex;
	}

	.interactive .toggle-size {
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	#gifts {
		background: #d9eeb8;
	}

	#getChatTop {
		color: #fff;
		padding-left: 16px;
	}

	.cc-live-control-bar{
		right: 8px !important;
	}
</style>